<template>
  <div>
    <div class="index-head">
      <div class="index-head-box">
        <!-- <img
          src="https://zhjs-oss.oss-cn-shanghai.aliyuncs.com/zhcc/jiazhang/1223.png"
          class="index-head-logo"
        /> -->
        <div class="index-head-menu">
          <div
            @click="changeMenu(key)"
            v-for="(item, key) in menu"
            :key="key"
            :class="
              menu_index == key ? 'index-head-link active' : 'index-head-link'
            "
          >
            {{ item.name }}
          </div>
          <!--                    <div class="guan_wang" @click="goLink">-->
          <!--                        <img src="@/assets/img/new123.png" class="guan_wang_img"/>-->
          <!--                        众安官网-->
          <!--                    </div>-->
          <div
            class="index-head-link"
            v-if="$store.state.loginState == false"
            @click="toLogin()"
          >
            登录
          </div>
          <div class="index-head-link-info" v-else>
            <div
              style="
                width: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
              "
            >
              <span
                style="
                  width: 80px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  color: #577fec;
                "
                @click="upDataName"
                >{{ $store.state.user_name }}</span
              >
              <span>{{ $store.state.mobile }}</span>
              <div style="padding: 0px 2px 0px 2px">
                <span style="color: #5180f9" @click="changepwd()"
                  >[修改密码]</span
                >
              </div>
              <span style="color: #5180f9" @click="outLogin()">[退出]</span>
            </div>
          </div>
          <div
            style="
              width: 60px;
              height: 20px;
              text-align: center;
              padding: 0 5px;
            "
          >
            <!--                        @click="toNotice()"-->
            <!--                        <img src="https://jy-club.oss-cn-shanghai.aliyuncs.com//iamges/icon/notice.png"-->
            <!--                             style="height: 100%" alt="">-->
          </div>
          <!--          底部-->
          <div class="index-head-menu-line" :style="lineStyle()"></div>
        </div>
      </div>
      <div class="customer-tel-box">
        <div class="customer-icon-box">
          <div class="icon-img-box">
            <img
              src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/Phone.png"
              alt="电话"
            />
          </div>
          <div class="icon-text-box">电话咨询</div>
        </div>
        <div class="customer-text-box">400-6598-168</div>
      </div>
      <div class="customer-wechat-box">
        <div class="customer-icon-box">
          <div class="icon-img-box">
            <img
              src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/weixin.png"
              alt="微信"
            />
          </div>
          <div class="icon-text-box">微信咨询</div>
        </div>
        <div class="wechat-img-box">
          <img
            style="width: 200px; height: 200px"
            src="https://djb.oss-cn-shanghai.aliyuncs.com/static/dongjiabao-wechat.png"
            alt="微信"
          />
        </div>
      </div>
    </div>
    <!--    内容路由-->
    <div class="index-body">
      <router-view></router-view>
    </div>
    <!--    底部-->
    <div class="index-footer" v-if="show_footer" style="padding-bottom: 20px">
      <div class="index-footer-top-box">
        <div class="index-footer-top">
          <img
            src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/footer1.png"
            class="index-footer-icon"
          />
          <div class="index-footer-info">
            <div class="index-footer-info-title">服务热线</div>
            <div>400-659-8168</div>
          </div>
          <img
            src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/footer2.png"
            class="index-footer-icon"
          />
          <div class="index-footer-info">
            <div class="index-footer-info-title">邮箱地址</div>
            <div>dongjiabaobx@163.com</div>
          </div>
        </div>
      </div>
      <div class="index-footer-bottom">
        <div class="index-footer-bottom-text">
          <span
            >©2020 年安保险销售服务有限公司 All Rrights Reserved.
            <a href="https://beian.miit.gov.cn/" target="“_blank”">
              <el-button type="text" style="color: #ffffff"
                >滇ICP备19010281号-1</el-button
              >
            </a>
            滇公网安备 53012345645678 号
          </span>
          <span style="margin-left: 50px">年安保险销售服务有限公司</span>
        </div>
      </div>
    </div>

    <el-dialog
      title="修改昵称"
      :visible.sync="nameUpDataDia"
      width="20%"
      center
    >
      <el-form size="mini">
        <el-form-item label="昵称">
          <el-input placeholder="请输入昵称" v-model="user_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="com-btn" size="mini" @click="nameUpDataDiaSu"
          >确定修改</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nameUpDataDia: false,
      menu: [
        {
          name: "首页",
          url: "/index/index/index",
        },
        {
          name: "我的订单",
          url: "/index/index/index",
        },
        {
          name: "快速理赔",
          url: "/index/index/index",
        },
      ],
      menu_index: 0,
      show_footer: true,
      user_name: "",
    };
  },
  mounted() {
    if (this.$route.path == "/index/login/login") this.show_footer = false;
    this.checkLogin();
    this.getUserName();
  },
  methods: {
    nameUpDataDiaSu() {
      this.ajaxs("user/editInfo", {
        data: {
          user_name: this.user_name,
        },
        success: (res) => {
          this.nameUpDataDia = false;
          if (res.code) {
            this.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message.error(res.msg);
          }
          this.getUserName();
        },
      });
    },
    upDataName() {
      this.user_name = this.$store.state.user_name;
      this.nameUpDataDia = true;
    },
    getUserName() {
      this.ajaxs("index/getInfo", {
        success: (res) => {
          if (res.msg) {
            if (res.msg.user_name) {
              this.$store.commit("updateName", res.msg.user_name);
            } else {
              this.$store.commit("updateName", "暂无用户名");
            }
          }
        },
      });
    },
    //检测登陆
    checkLogin() {
      this.ajaxs("index/check", {
        success: (res) => {
          if (res.msg == "error") {
            this.$store.commit("updateMobile", "");
            this.$store.commit("updateLoagin", false);
          } else {
            this.$store.commit("updateMobile", res.msg);
            this.$store.commit("updateLoagin", true);
          }
        },
      });
    },
    changeMenu(key) {
      this.menu_index = key;
      if (this.menu_index == 0) {
        this.$router.push({
          path: "/index/index/index",
        });
      }
      if (this.menu_index == 1) {
        this.$router.push({
          path: "/index/order/list",
        });
      }
      if (this.menu_index == 2) {
        this.$router.push({
          path: "/index/pei/index",
        });
      }
    },
    changepwd() {
      this.$router.push({
        path: "/index/login/forgot",
      });
    },
    toNotice() {
      this.$router.push({
        path: "/index/index/notice",
      });
    },
    lineStyle() {
      if (this.menu_index == 0) {
        return this.$store.state.loginState == false
          ? {
              right: (3 - this.menu_index) * 100 + 95 + "px",
              width: 30 + "px",
            }
          : {
              right: (3 - this.menu_index) * 100 + 290 + "px",
              width: 30 + "px",
            };
      } else {
        return this.$store.state.loginState == false
          ? {
              right: (3 - this.menu_index) * 100 + 80 + "px",
            }
          : {
              right: (3 - this.menu_index) * 100 + 274 + "px",
            };
      }
    },
    outLogin() {
      this.ajaxs("login/outLogin", {
        success: (res) => {
          this.toast(res.code, "退出成功");
          this.$store.commit("updateMobile", "");
          this.$store.commit("updateLoagin", false);
          this.$store.commit("updateName", "");
          this.$router.push({
            path: "/index/login/login",
          });
        },
      });
    },
    toLogin() {
      this.$router.push({
        path: "/index/login/login",
      });
    },
    goLink() {
      window.open("http://index.dongjbao.com/");
    },
  },
  watch: {
    $route(v, o) {
      // window.document.title="东家保"
      console.log(v, o);
      if (v.path == "/index/login/login") {
        this.show_footer = false;
      }
      if (v.path == "/index/index/index") {
        this.show_footer = true;
      }
      var str = v.path;
      if (str.indexOf("/index/index") != -1) {
        this.menu_index = 0;
      }
      if (str.indexOf("/index/order") != -1) {
        this.menu_index = 1;
      }
      if (str.indexOf("/index/pei") != -1) {
        this.menu_index = 2;
      }
    },
  },
};
</script>

<style scoped>
@import "../assets/css/index.css";
</style>
